
html,body,.page{overflow: hidden;}
html,body,.body,.page{ position: relative; width:100%;height:100%;  background-color: #000;}

.body{transition:transform 1s ease-in-out;}
.body-music{ position: absolute;right:40px;top:60px; z-index: 100; background: url("images/music-icon.png"); width: 38px; height: 38px; transition: all 1s linear;}
.body-header{ position: absolute;left:0;width:640px;top:0; z-index: 100;}
/*.body{transform: translate3d(0,-600%,0);}*/

.page0{ background: url("images/loading.jpg") center 0 no-repeat;}
.page1{ /*background:url("images/room-long.jpg") no-repeat 0 0;*/}
.page2{ background:url("images/2.jpg") no-repeat 0 0;}
.page3{ background:url("images/3.jpg") no-repeat 0 0;}
.page4{ background:url("images/4.jpg") no-repeat 0 0;}
.page5{ background:url("images/5.jpg") no-repeat 0 0; }
.page6{position: relative; z-index: 5; background: none;}
/*.page6{ background:url("images/6.jpg") no-repeat 0 0;}*/
.page7{ background:url("images/7.jpg") no-repeat 0 0;transform: translateY(-100%);}

.mission2{ background: url("images/2-mission.png") 0 0 no-repeat; width: 640px; height: 64px; }
.mission3{ background: url("images/3-mission.png") 0 0 no-repeat; width: 640px; height: 64px; }
.mission4{ background: url("images/4-mission.png") 0 0 no-repeat; width: 640px; height: 64px; }
.mission5{ background: url("images/5-mission.png") 0 0 no-repeat; width: 640px; height: 64px; }

.page0-loading{ position: absolute;top:400px;left:0; text-align: center;width:640px;color:#00b1ff;font-size:36px;}
.page0-loading p{}
.loading-bar{margin:50px auto 0;width: 434px; background: url("images/loading-bar-gb.png") center 0;height: 29px;padding:5px 8px;}
.loading-bar-val{width: 426px;position: relative; background: url("images/loading-bar-green.png") 0 0 no-repeat;height: 20px;border-radius:8px;}
.loading-light{position: absolute;right:-17px;top:-14px; background: url("images/loading-effect.png"); width: 42px; height: 43px;}
/*.page0-loading-dot{padding:20px 0 0; text-align: center;}
.page0-loading-dot span{ display: inline-block; vertical-align: middle; height:8px;width:8px;border-radius:4px; background-color: #fff;margin:0 4px;}
.page0-loading-dot span:nth-child(1){}*/


/*page1*/
.page1-logo{ position: absolute;left:60px;top:-93px; background: url("images/logo.png") 0 0 no-repeat; width: 89px; height: 93px; }
.page1-title{ position: absolute;left:0;top:247px; background: url("images/1-title.png"); width: 640px; height: 395px; }
.page1-title-cursor{position: absolute;left: 478px;top: 347px;width: 43px;height: 6px; background-color: #fff; vertical-align: text-bottom; overflow: hidden;box-shadow:0 0 10px 3px rgb(54, 168, 230);}

.page1-sight{ position: absolute;left:70px;top:490px; background: url("images/1-sight.png"); width: 290px; height: 314px; }
.page1-light-outer{position: absolute;left: 130px;top:390px;width: 640px; height:  104px; overflow: hidden;}
.page1-light{ transform: scale(.8); background: url("images/1-light.png") 0 0 no-repeat; width: 640px; height:  104px; }
.page1-bg{ position: absolute;left:0;top:0; background:url("images/room-long.jpg") no-repeat 0 0; width: 640px; height: 1006px; }
.page1-glow{ position: absolute; left: 198px;top:285px; background:url("images/1-glow.png") 4px 1px no-repeat; width: 84px; height: 84px; }
.page1-arrow{position: absolute; left: 226px;bottom:100px; background:url("images/1-arrow.png") 0 0 no-repeat; width: 214px; height: 189px;}
.page1-btn{position: absolute; left:185px;bottom:140px; background:url("images/1-btn.png") 0 0 no-repeat; width: 306px; height: 117px;}


/*页面底部 描述*/
.step{ position: absolute; bottom: 20px;left:0; background:url("images/step-bg.png") 0 0 no-repeat; width: 640px; height: 182px; color:#018cd7;text-shadow:0 0 13px rgba(90, 189, 243, 0.83); line-height: 1.8; display: none; z-index: 100;}
/*.body-footer.step{ display: block;}*/
.step-move{position: absolute;left:0;top:1px; width: 78px;height:180px; overflow: hidden;}
.step-move-text{  background: url("images/step-text.png") 0 0 repeat-y; width: 78px; height: 178px; }
.step-screen{position:absolute;left:30px;top:4px; background: url("images/screen.png") 0 0 no-repeat; width: 204px; height: 170px; }
.step-screen-blank{ background: url("images/screen-normal-2.png") center center no-repeat;width: 204px; height: 170px;}
.step-screen-normal{ background: url("images/screen-normal.png") center center no-repeat;width: 204px; height: 170px;margin-top:-170px;}
.step-title{position:absolute;left:260px;top:10px; font-size:30px;}
.step-desc{position:absolute;left:260px;top:64px;font-size:25px;letter-spacing:2px; line-height: 1.8; width: 340px;}
/*.step-desc span{color:#AADFFB;font-weight:bold;}*/
.step-desc-cursor{ display: inline-block;width:.8em;height:4px; background-color: #59c5ff; vertical-align: text-bottom; overflow: hidden;box-shadow:0 0 10px rgba(90, 189, 243, 0.83); }

/*弹出框*/
.popup{ position: fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%; background: rgba(0,0,0,.8); z-index: 1000;}
.popup-body{ position: absolute;top:50%;left:0; margin:-197px 0 0; background: url("images/popup-bg.png") 0 0 no-repeat; width: 496px; height: 395px;  }
.popup-body-outer{ position:absolute;top:40%;left:50%;width: 496px;overflow: hidden; margin:-80px 0 0 -248px;height:0;}
.popup-body-line{ position: absolute;top:50%;left:50%; margin:-83px 0 0 -248px;border-top:solid 3px #00a5ff; border-bottom:solid 3px #00a5ff;height:0;width:465px; z-index: 10;}
.popup-body-inner{padding:110px 50px 0; }
.popup-time{font-size:56px;color:#fff;padding:10px 0;font-weight:bold; text-align: center; line-height: 1;}
.popup-desc{height:138px;color:#00a7ff;font-size:26px; line-height: 1.8;}
.popup-desc strong{color:#fff;font-size:32px; }
.popup-desc-cursor{display: inline-block;width:.8em;height:2px; background-color: #fff; vertical-align: text-bottom; overflow: hidden;box-shadow:0 0 10px 3px rgb(54, 168, 230); }
.popup-action{ text-align: center;}
.popup-action-next{ display: inline-block; background: url("images/popup-next.png") 0 0 no-repeat; width: 171px; height: 98px; }


/*page2*/
.page2-circle{position:absolute;left:97px;top:266px; background: url("images/2-circle.png"); width: 434px; height: 434px; }
/*.page2-circle-rotate{position:absolute;left: 117px;top: 279px; background: url("images/2-circle-rotate-light.png") 300px 29px no-repeat; width: 400px; height: 400px; }*/
.page2-circle-rotate{ display: none; position:absolute;left: 117px;top: 279px; background: url("images/2-light-bright.png") 300px 29px no-repeat; width: 400px; height: 400px; }
.page2-circle-scan{position:absolute;left:136px;top:295px;width: 360px;height:360px; overflow: hidden;border-radius:180px; -webkit-mask-image: url(); z-index: 10;}
.page2-circle-scan-light{background: url("images/2-light.png");margin:-66px auto 0; width: 377px; height: 66px;}
.page2-circle-hd{position:absolute;left:223px;top:233px; background: url("images/2-circle-hd.png"); width: 189px; height: 115px;}

.sector-outer{position: absolute; border-radius:200px; overflow: hidden;left: 117px;top: 279px;  z-index:1;width: 400px;height: 400px;}
.sector{ position: absolute;bottom: 200px;left: 200px;width: 400px;height: 400px; /* background: rgba(255, 0, 0, 0.21); */transform: rotate(-56deg) skew(-87deg);transform-origin: left bottom;overflow: hidden;}
.sector-light{position: absolute;background: url("images/2-light-bright.png") 300px 29px no-repeat; width: 400px; height: 400px; left: -200px;bottom: -200px;}


/*page3*/
.page3-target{}
.target-plane{ position: absolute;left:0;top:0; background: url("images/3-plane.png"); width: 369px; height: 198px; opacity: .1;}
.target-plane1{top:100px;left:-50px;}
.target-plane2{}
.target-plane1{}
.target-plane1{}
.target-missile{ position: absolute;left:0;top:0; background: url("images/3-missiles.png"); width: 111px; height: 68px; opacity: .1;}
.target-missile1{}
.target-missile2{}
.target-missile3{}
.target-missile4{}
.target-missile5{}
.target-missile6{}

.page3-shoot{ position: absolute; left: 175px;top:289px;border-radius:145px; width:290px;height:290px; z-index: 10;}
.page3-shoot-shadow{ position: absolute; left: 182px;top:274px;border-radius:145px; width:290px;height:290px;}


.page3-mask{ position: absolute;top:0;right:0; background: url("images/3-bg.png") 0 0; width: 640px; height: 1006px; }
.page3-sight{ position: absolute;top: 160px;left: 62px; background: url("images/3-sight.png") 1px 4px; width: 530px; height: 530px; }
.page3-arrow{ position: absolute;top:188px;left:27px; background: url("images/3-arrow.png"); width: 530px; height: 539px; }
.page3-radar{ position: absolute;bottom:210px;left:20px; background: url("images/radar-bg.png") 0 0; width: 212px; height: 136px; overflow: hidden;}
.radar-scan{ position: absolute;left:-50px;top:-88px; width:312px;height:312px; background:url("images/radar-scan.png") 155px 49px no-repeat; }
.radar-target{ position: absolute;border-radius:4px;width:8px;height:8px; overflow: hidden; background-color: #40e2ff;}
.page3-shoot-target{ display: none;}
.page3-shoot-target1{position:absolute;left: 60px;top: 400px; background: url("images/3-plane1.png"); width: 424px; height: 232px; }
.page3-shoot-target2{position:absolute;left: 60px;top: 220px; background: url("images/3-plane2.png"); width: 373px; height: 233px; }

.radar-target1{left:57px;top:44px;animation-duration: 1.4s;}
.radar-target2{left:87px;top:69px;animation-duration: 1.2s;}
.radar-target3{left:120px;top:96px;animation-duration: .8s;}
.radar-target4{left:140px;top:50px;animation-duration: 1s;}

/*page4*/
.page4-circle{ position: absolute;left: 45px;top: 210px; background: url("images/4-circle.png") 17px 25px no-repeat ; width: 551px; height: 550px; }
.page4-circle-move{ position: absolute;left: 45px;top: 210px; background: url("images/4-circle-2.png") 261px 62px no-repeat ; width: 551px; height: 550px; }
.page4-circle.on{background: url("images/4-circle-on.png") 17px 25px no-repeat ;}
.page4-circle2{ position: absolute;left: 205px;top: 80px; background: url("images/4-circle2.png") 0 0 no-repeat; width: 401px; height: 407px; }


.page4-toucher{position: absolute;left: 45px;top: 210px; width: 550px; height: 550px;}
.page4-light{ position: absolute;top:208px;left:48px; background: url("images/4-light.png") center center no-repeat; width: 549px; height: 549px; }
.page4-bar{ position: absolute;left:149px;top:306px; width:350px;height:350px;border-radius:175px; background-color: #424242; overflow: hidden;-webkit-mask-image: url();}
.page4-bar-wrapper{ position: absolute;bottom:0; left: 0;height:1%;width:350px;-webkit-mask-image: url();}
.page4-bar-wrapper-inner{height:350px;width:350px;position: absolute;bottom:0; left: 0; background: url("images/4-color-circle.png") center center no-repeat;}
.page4-bar-wrapper-inner div{margin-bottom:5px; display: none;}
.page4-bar1{height:60px;}
.page4-bar2,
.page4-bar3,
.page4-bar4,
.page4-bar5,
.page4-bar6{height:42px;}
.page4-bar7{height:60px;}
.page4-bar1.on{ background-color: #538112;}
.page4-bar2.on{ background-color: #70a524;}
.page4-bar3.on{ background-color: #a0a524;}
.page4-bar4.on{ background-color: #db8b00;}
.page4-bar5.on{ background-color: #c75400;}
.page4-bar6.on{ background-color: #b12e00;}
.page4-bar7.on{ background-color: #880000;}

/*page5*/
.page5-mission{ position: absolute;width:420px;left:110px;top:220px; line-height: 1.8;font-size:36px;color:#00a7ff; z-index: 10;}
.page5-mission-title{ font-weight: bold;padding:15px 0 10px;text-transform: uppercase; text-align: center;color:#c3e9fe;}
.loading .page5-mission-title{color:#00a7ff;font-family: "Courier New";font-weight:normal; text-align: left;}
.page5-mission-desc{ position: relative; overflow: hidden; height:135px;word-break: break-all;font-size:32px;line-height: 1.5;padding:0 0 0;}
.loading .page5-mission-desc{font-size:42px; }
.page5-mission-desc-fixed{font-family: "Courier New";  line-height: 1.5; position: absolute;left:0;bottom:10px;;width:420px;}
.page5-mission-desc strong{ font-weight: normal;color:#fff;}
.page5-cursor{display: inline-block;width:.8em;height:4px; background-color: #fff; vertical-align: text-bottom; overflow: hidden;box-shadow:0 0 10px rgba(90, 189, 243, 0.83); }
.page5-mission-bar{margin:0 auto; ;width: 319px;background: url("images/bar-bg.png") center 0;height:19px;padding:17px 0;}
.bar-red{ position: relative; background: url("images/bar-red.png") 0 0 no-repeat;height:17px;}
.bar-green{ position: relative; background: url("images/bar-green.png") 0 0 no-repeat;height:17px;}
.bar-effect{ position: absolute;right:-12px;top:-7px; background: url("images/5-glow-effect.png"); width: 31px; height: 32px; }
.process-bar{   }
.process-bar-val{}
.page5-mission-action{padding:120px 0 0; text-align: center;}
.page5-mission-action .btn{ display: inline-block; width: 332px; height: 111px; position: relative;}
.page5-mission-action .btn-inner{ position: absolute;left: 16px;top: 15px;width: 300px;height: 77px;border-radius: 6px; overflow: hidden; display: none;}

.page5-mission-action .btn-off{ background: url("images/5-btn-off.png"); }

.page5-mission-action .btn-on{background: url("images/5-btn-on.png");}
.page5-mission-action .btn-on .btn-inner{ display: block;}

.page5-arrow{ position: absolute;left:50%;margin-left:-107px; top:561px; background: url("images/1-arrow.png"); width: 214px; height: 189px; }

/*page6*/
.page6-door-left{ position: absolute;left:0;top:0; background: url("images/6-left-door.png"); width: 330px; height: 1006px; overflow: hidden; z-index: 1;}
.page6-door-right{ position: absolute;right:0;top:0; background: url("images/6-right-door.png"); width: 461px; height: 1006px; overflow: hidden;}

.page6-nums{position: relative;width:640px; z-index: 10;height:337px;padding:197px 0 0 90px; clear: both;}
.page6-door-right .page6-nums{margin-left:180px;padding-left:0;}
.nums-item{ position: relative; height:140px; overflow: hidden;width:76px;float:left;margin-right:48px;}
.nums-item-up{content:''; position: absolute;left:28px;top:10px; background: url("images/6-up.png"); width: 20px; height: 15px; }
.nums-item-down{content:''; position: absolute;left:28px;bottom:10px; background: url("images/6-up.png"); width: 20px; height: 15px; transform: rotate(180deg);}
.nums-item ul{font-size:58px; text-align: center;}
.nums-item .transition{transition: margin-top .2s ease-in;}

.nums-item ul li{ vertical-align: top;height:120px;padding:10px; line-height: 120px; font-weight: bold;color:#0773af;}

.page6-status{position: relative; width:640px;z-index: 10;padding:21px 0 0 113px;height:27px;}
.page6-door-right .page6-status{padding-left:205px;}
.status-item{float:left;margin-right:100px;  width: 27px; height: 27px; }
.status-item.on{background: url("images/6-green.png") 0 0 no-repeat;}
.status-item:nth-child(2){margin-right:117px;}

.page6-action{position:relative; z-index: 10; margin:520px 0 0 0; text-align: center; }
.page6-action a{ position: relative;display: inline-block;background: url("images/6-btn.png"); width: 332px; height: 111px; }
.page6-action a .btn-inner{ position: absolute;left: 16px;top: 15px;width: 300px;height: 77px;border-radius: 6px; overflow: hidden;}
.page6-arrow{ position: absolute;left:50%;margin-left:-107px; top:484px; background: url("images/1-arrow.png"); width: 214px; height: 189px; z-index: 5;}


/*page7*/
.page7-title{color:#fff;font-size:36px;padding:130px 0 0 225px;}
.page7-title-cursor{display: inline-block;width:.8em;height:4px; background-color: #fff; vertical-align: text-bottom; overflow: hidden;box-shadow:0 0 10px rgba(90, 189, 243, 0.83);}
.page7-arrow{ position: absolute;left:50%;margin-left:-107px; top:784px; background: url("images/1-arrow.png"); width: 214px; height: 189px; }
.page7-action{position:relative; z-index: 10; padding: 676px 0 0 190px; /* text-align: center; */ }
.page7-action a{ position:relative;display: inline-block;width: 255px; height: 76px; overflow: hidden;border-radius: 8px;}

.page7-action a .btn-inner{position: absolute;left: 0;top:0;width: 257px;height: 77px;border-radius: 6px; overflow: hidden;}

/*.page7{ z-index: 100;}*/
.page7-phone{ position:absolute;left:60px;top:190px; background: url("images/7-phone.png") no-repeat; width: 290px; height: 479px; }
.page7-circle{ display: inline-block;width:60px;height:60px; background: url("images/7-rotate-circle.png") 0 0 no-repeat; overflow: hidden;}

.page7-circle{ position: absolute;}
.page7-circle1{left: 532px;top: 377px;}
.page7-circle2{left: 540px;top: 510px;}

.page7-circle1{ background-position: -60px -53px;}
.page7-circle1-outer{ background-position: 0 -53px;}
.page7-circle1-inner{ background-position: -120px -53px;}

.page7-circle2{ background-position: 0 0;width:53px;height:53px;z-index: 2;}
.page7-circle2-inner{ background-position: -53px 0;width:53px;height:53px; z-index: 1;}

.btn-light{ position: absolute;left: -330px;top: 20px; background: url("images/btn-light.png") 0 0 no-repeat; width: 570px; height: 109px; }

